import React from "react";
import TiltedImage from "./TiltedImage";
import "./GenerationItem.css";

export type GenerationStatus = 'uploading' | 'completed' | 'failed';

interface GenerationItemProps {
  id: string;
  date: string;
  imageUrls: string[]; // 改为数组支持多张图片
  format: string;
  aspectRatio: string;
  resolution: string;
  status: GenerationStatus;
  // 上传中状态的属性
  uploadingStatus?: string;
  onCancel?: () => void;
  // 完成状态的属性
  onEdit?: () => void;
  onRegenerate?: () => void;
  onDelete?: (id: string) => void;
  // 生成图片相关
  generatedImages?: string[];
  onImageClick?: (imageUrl: string, index: number) => void;
  // 文本参数
  prompt?: string;
}

const GenerationItem: React.FC<GenerationItemProps> = ({
  id,
  date,
  imageUrls,
  format,
  aspectRatio,
  resolution,
  status,
  uploadingStatus = "处理中...",
  // onCancel,
  onEdit,
  onRegenerate,
  onDelete,
  generatedImages = [],
  onImageClick,
  prompt,
}) => {
  const isUploading = status === 'uploading';

  // 格式化日期显示：月日 时分
  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
      
      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        console.warn('无效的日期格式:', dateString);
        return '今天';
      }
      
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${month}月${day}日 ${hours}:${minutes}`;
    } catch (error) {
      console.error('日期格式化失败:', error);
      return '今天';
    }
  };

  return (
    <div className={`generation-item ${status}`}>
      {/* 日期 */}
      <div className="generation-date">{formatDate(date)}</div>
      
      {/* 图片和参数 */}
      <div className="generation-content">
        <div className="generation-image-container">
          {imageUrls.map((imageUrl, index) => (
            <TiltedImage
              key={index}
              src={imageUrl}
              alt={`图片 ${index + 1}`}
              tiltDirection={index % 2 === 0 ? "left" : "right"}
              onClick={() => console.log(`图片 ${index + 1} 被点击了`)}
            />
          ))}
        </div>
        
        <div className="generation-info">
          <div className="generation-params">
            {format} | {aspectRatio} | {resolution}
          </div>
          {prompt && (
            <div className="generation-prompt">
              {/* <div className="prompt-label">提示词:</div> */}
              <div className="prompt-text">{prompt}</div>
            </div>
          )}
        </div>
      </div>

      {/* 生成后图片展示区域 */}
      {generatedImages.length > 0 && (
        <div className="generated-images-grid">
          {generatedImages.map((imageUrl, index) => (
            <div key={index} className="generated-image-item">
              <img
                src={imageUrl}
                alt={`生成的图片 ${index + 1}`}
                onClick={() => onImageClick?.(imageUrl, index)}
              />
            </div>
          ))}
        </div>
      )}
      
      {/* 状态区域 */}
      {isUploading ? (
        <div className="generation-status">
          <div className="status-text">{uploadingStatus}</div>
          <div className="loading-dots">
            <span></span>
            <span></span>
            <span></span>
          </div>
        </div>
      ) : (
        <>
          {/* 失败状态显示错误信息 */}
          {status === 'failed' && (
            <div className="generation-status failed">
              <div className="status-text">{uploadingStatus}</div>
            </div>
          )}
          <div className="generation-actions">
            <button className="action-btn edit-btn" onClick={onEdit}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path
                d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            重新编辑
          </button>
          
          <button className="action-btn regenerate-btn" onClick={onRegenerate}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path
                d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M21 3v5h-5"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M3 21v-5h5"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            再次生成
          </button>
          
          <button className="action-btn delete-btn" onClick={() => onDelete?.(id)}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path
                d="M3 6h18"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
              <path
                d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              />
            </svg>
            删除当前批次结果
          </button>
          </div>
        </>
      )}
    </div>
  );
};

export default GenerationItem;
